<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #canvas {
            background: rebeccapurple;
        }
    </style>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

<!-- 顶点着色器 -->
<script id="vertexShader" type="x-shader/x-vertex">
    void main(){
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
        gl_pointSize = 100.0;
    }
</script>
<!-- 片元着色器 -->
<script id="fragmentShader" type="x-shader/x-fragment">
    void main(){
        gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
    }
</script>
<script type="module">
    import { Color } from 'https://unpkg.com/three/build/three.module.js';
    import { initShaders } from '../jsm/Utils.js';
    import lib from '../ThreeLib.js';

    window.onload = function () {

        const backColor = new Color("rgba(233,233,233,1)");

        const canvas = document.getElementById("canvas");
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const gl = canvas.getContext("webgl");
        const vsSource = document.querySelector("#vertexShader").innerText;
        const fsSource = document.querySelector("#vertexShader").innerText;

        //初始化着色器
        initShaders(gl, vsSource, fsSource);

        lib.clearCanvas(gl, backColor)
    }



</script>

</html>